<template>
  <div>
    <ScaleScreen :width="1450" :height="900" class="scale-wrap">
      <div class="box" style="height:300px">
        <div style="flex:0 1 50%;">
          <dv-border-box-1 style="width:100%;">
            <!-- 图表 -->
            <lineChart style="width:100%;height:100%" />
          </dv-border-box-1>
        </div>
        <div style="flex:0 1 50%;">
          <dv-border-box-4 style="width:100%;">
            <dv-capsule-chart
              :config="config"
              style="height:92%;width:96%;padding-top:20px ;margin:0 auto"
            />
          </dv-border-box-4>
        </div>
      </div>

      <div class="box" style="height:300px">
        <div style="flex:0 1 50%;">
          <dv-border-box-13 style="width:100%;">
            <!-- 图表 -->
            <lineChart style="width:100%;height:100%" />
          </dv-border-box-13>
        </div>
        <div style="flex:0 1 50%;">
          <dv-border-box-4 style="width:100%;">
            <dv-capsule-chart
              :config="config"
              style="height:92%;width:96%;padding-top:20px ;margin:0 auto"
            />
          </dv-border-box-4>
        </div>
      </div>

      <div class="box" style="height:200px">
        <div style="flex:0 1 50%;">
          <dv-border-box-1>
            <!-- 图表 -->
            <lineChart style="width:100%;height:100%" />
          </dv-border-box-1>
        </div>
        <div style="flex:0 1 50%;">
          <dv-border-box-4>
            <dv-capsule-chart
              :config="config"
              style="height:92%;width:96%;padding-top:20px ;margin:0 auto"
            />
          </dv-border-box-4>
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>

<script>
import ScaleScreen from "./scale-screen/scale-screen.vue";
import lineChart from "./components/lineChart.vue";
export default {
  components: {
    ScaleScreen,
    lineChart
  },
  data() {
    return {
      config: {
        data: [
          {
            name: "周口",
            value: 55
          },
          {
            name: "南阳",
            value: 120
          },
          {
            name: "西峡",
            value: 78
          },
          {
            name: "驻马店",
            value: 66
          },
          {
            name: "新乡",
            value: 80
          }
        ]
      }
    };
  },
  created() {},
  methods: {}
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
}
</style>